<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :mode="mode"
      :setting="setting"
      :disabled="true"
      :showQuestionIcon="true"
      :questionText="$t('common.form.preview.relateTask.des1')"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 显示字段 -->
    <div class="form-setting-group form-setting-item" v-if="mode == 'task_card'">
      <h4 class="form-item-title form-show-system">
        <span>
          {{ $t('common.form.preview.relateTask.tip1')}}
          <el-tooltip placement="top">
            <div slot="content">
              {{ $t('common.form.preview.relateTask.tip2')}}
            </div>
            <i class="iconfont icon-question"></i>
        </el-tooltip>
      </span>
        <el-switch  v-model="field.setting.isShowSystemFields" @input="update($event, 'isShowSystemFields', true)"></el-switch>
      </h4>
      <div class="form-type-text-lang form-select-system" v-if="field.setting.isShowSystemFields">
        <el-select v-model="field.setting.systemFields" multiple  :multiple-limit="5">
          <el-option
            v-for="item in taskSystemFields"
            :key="item.fieldName"
            :label="item.displayName"
            :value="item.fieldName"
          ></el-option>
        </el-select>
      </div>
    </div>
    <!-- end 显示字段 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 移动端列表展示 -->
        <mobile-show-setting v-if="isTaskMode || isOnlyEventMode || isOnlyProductMode" :is-event-mode="isEventMode" :field="field" :fields="fields" @input="update"></mobile-show-setting>
        <!-- 可见性 -->
        <form-visible-setting :field="field" @input="update"></form-visible-setting>
        <!-- 支持高级搜索 -->
        <form-search-setting :field="field" @input="update" v-if="!isTaskCardForm"></form-search-setting>
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update" v-if="isTaskModeForVisibleCustomer"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->

    <!-- start 其他设置 -->
    <!-- end 其他设置 -->
  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
/* props */
import { settingProps } from '@src/component/form/components/props';
import { findComponentUpward } from '@src/util/assist';
export default {
  name: 'form-related-task-setting',
  mixins: [SettingMixin],
  props: settingProps,
  computed: {
    defaultValueConfig() {
      return this.field.setting && this.field.setting.defaultValueConfig || {}
    },
    /** 
    * @description 获取工单系统字段
    */
    taskSystemFields() {
      let parent = findComponentUpward(this, 'form-design');
      // 拼接工单状态
      const systemFieldToAdd = {
        fieldName: 'state',
        displayName: i18n.t('task.taskState'),
        formType: 'text'
      };
      return parent.taskSystemFields.concat(systemFieldToAdd);
    },
  },
  methods: {
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', {value, prop, isSetting});
    }
  }
}
</script>
<style lang="scss" scoped>
.form-show-system {
  display: flex;
  justify-content: space-between;
}
.form-select-system {
  margin-top: 8px;
  .el-select {
      width: 100%;
  }
}
</style>
